<template>
    <div class="login-page">
      <div class="content">
        <h3>商店管理平台</h3>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
          size="large"
        >
          <el-form-item prop="username">
            <el-input
              v-model="ruleForm.username"
              :readonly="readonly"
              placeholder="请输入用户名"
              @click="readonly=false"
            >
              <template #prefix>
                <el-icon class="iconfont icon-yonghuming"></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item class="password" prop="password">
            <el-input
              v-model="ruleForm.passwd"
              type="password"
              placeholder="请输入密码"
            >
              <template #prefix>
                <el-icon class="iconfont icon-mima"></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              class="login-btn"
              type="primary"
              @click="submitForm()"
              :loading="loginLoading"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  <script  setup lang='ts'>
import LoginService from './Login.js'
const {
    ruleForm,
    loginLoading,
    readonly,
    rules,
    submitForm
} = new LoginService();

</script>

<style lang='scss' scoped>
@import './Login.scss'
</style>
  ./Login.js